<template>
  <!-- 任务状态 -->
  <view class="task-status">
    <view
        class="status-item"
        :class="{ active: activeTab === 'ongoing' }"
        @click="switchTab('ongoing')"
    >
      <text class="status-label">进行中</text>
    </view>
    <view
        class="status-item"
        :class="{ active: activeTab === 'ended' }"
        @click="switchTab('ended')"
    >
      <text class="status-label">已截止</text>
    </view>
  </view>
  <view class="container">
<!--    &lt;!&ndash; 顶部信息 &ndash;&gt;-->
<!--    <view class="top-info">-->
<!--      <text class="username">name</text>-->
<!--      <text class="class-info">class</text>-->
<!--    </view>-->

<!--    &lt;!&ndash; 训练量和平均正确率 &ndash;&gt;-->
<!--    <view class="stats">-->
<!--      <view class="stat-item">-->
<!--        <text class="stat-value">60%</text>-->
<!--        <text class="stat-label">平均正确率</text>-->
<!--      </view>-->
<!--    </view>-->

<!--    &lt;!&ndash; 时间范围和班级排名 &ndash;&gt;-->
<!--    <view class="time-rank">-->
<!--      <text class="rank">班级排名 历史班级</text>-->
<!--    </view>-->



    <!-- 动态显示任务内容 -->
    <view class="task-detail">
      <view v-if="activeTab === 'ongoing'"  style="background-color: white;width: 100%" class="task-content">
        <text class="task-description" v-if="taskList1.length == 0">暂无作业</text>
        <view @click="godateil(item.title,item.questionId,item.type,item.id)" v-else  v-for="item in taskList1" style="box-shadow: 0 0 10rpx rgba(0,0,0,0.1);margin: 20rpx auto;width: 650rpx;height:80rpx;font-size: 28rpx;color: #7c7c7c;border-radius: 10rpx;display: flex;align-items: center;justify-content: space-around;background-color: white;padding: 10rpx;">
          <view style="width: 600rpx">{{item.title}}</view>
          <van-icon name="arrow" />
        </view>
      </view>
      <view v-if="activeTab === 'ended'" class="task-content">
        <text class="task-description" v-if="taskList2.length == 0">暂无作业</text>
        <view @click="godateil(item.title,item.questionId,item.type,item.id)" v-else  v-for="item in taskList2" style="box-shadow: 0 0 10rpx rgba(0,0,0,0.1);margin: 20rpx auto;width: 650rpx;height:80rpx;font-size: 28rpx;color: #7c7c7c;border-radius: 10rpx;display: flex;align-items: center;justify-content: space-around;background-color: white;padding: 10rpx;">
          <view style="width: 600rpx">{{item.title}}</view>
          <van-icon name="arrow" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onLoad} from '@dcloudio/uni-app'
import * as Api from "/api/homework"
let taskList1 = ref([])
let taskList2 = ref([])
import { useCommonStore } from '/stores/common'
const common = useCommonStore()
const godateil = (title,id,type,tid) => {
  if (type === 1){
    common.taskQuestionids = id.split(",")
    uni.navigateTo({
      url: `/pages/task/taskT/taskT?type=${type}&tid=${tid}&title=${title}`
    })
  }else if (type === 2){
    common.taskQuestionids = id.split(",")
    uni.navigateTo({
      url: `/pages/task/taskP/taskP?type=${type}&tid=${tid}&title=${title}`
    })
  }else if (type === 3){
    common.taskQuestionids = id.split(",")
    uni.navigateTo({
      url: `/pages/task/taskT/taskT?type=${type}&tid=${tid}&title=${title}`
    })
  }

}
onLoad(async ()=>{
  let res = await Api.getWork({
    "currentPage": 1,
    "pageSize": 25
  })
  res.data.rows.forEach(x => {
    if (new Date(x.dueDate).getTime() > Date.now()){
          taskList1.value.push(x)
    }else {
      taskList2.value.push(x)
    }
  })
})
// 当前选中的标签
const activeTab = ref('ongoing');

// 切换标签
const switchTab = (tab) => {
  activeTab.value = tab;
};
</script>

<style scoped>
.container {
  padding: 10rpx;
  background-color: white;
  height: calc(100vh - 195rpx);
}

.top-info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.username, .class-info {
  font-size: 14px;
  color: #333;
}

.stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

.time-rank {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.rank {
  font-size: 14px;
  color: #333;
}

.task-status {
  padding:10rpx 30rpx;
  display: flex;
  justify-content: center;
  gap: 140rpx;
  background-color: white;
}

.status-item {
  text-align: center;
  padding: 10px;
  cursor: pointer;
}

.status-item.active {
  border-bottom: 2px solid #0AD192;
}

.status-label {
  font-size: 18px;
  color: #333;
}

.task-detail {
  background-color: white;
  border-radius: 15px;
  padding: 20rpx 0;
}



.task-description {
  display: inline-block;
  text-align: center;
  font-size: 14px;
  width: 100%;
  color: #666;
}
</style>